<template>
	<view>
		<u-gap bg="#f6f5f8" height="8"></u-gap>
		<!-- 群成员 -->
		<view class="" v-if="CrowdNumberList.length > 0">
			<view class="list p-16 bg-white" style="
          display: grid;
          grid-template-columns: auto auto auto auto auto;
          grid-template-rows: auto auto auto auto auto;
        ">
				<view class="item text-cen w-44 h-64 mr-31 mb-16 flex flex-col relative"
					v-for="(item, index) in CrowdNumberList" :key="index">

					<view v-if="item.isOnline" class="size-8 absolute" style="
              border-radius: 50%;
              top: 36px;
              right: 4px;
              background-color: #4af12a;
            ">
					</view>
					<image :src="item.uavatar" class="size-44" style="border-radius: 50%"></image>
					<view class="nickName w-33 mt-9 textover">
						{{ item.unickName }}
					</view>
				</view>
				<view class="item w-44 h-64 mr-31 mb-16 flex flex-col" @click="
            $pub.go(
              `/pages_message/inviteUser/inviteUser?ugroupId=${friend.groupId}`
            )
          ">
					<image src="/static/img/fehuo/tu14.png" class="size-44"></image>
				</view>
				<view class="item w-44 h-64 mr-31 mb-16 flex flex-col" @click="
            $pub.go(
              `/pages_message/inviteUser/inviteUser?ugroupId=${friend.groupId}`
            )
          ">
					<image src="/static/img/fehuo/tu15.png" class="size-44"></image>
				</view>
			</view>
		</view>

		<u-gap bg="#f6f5f8" height="8"></u-gap>
		<!--  -->
		<u-cell-group>
			<u-cell size="large" class="" value="" isLink title="查看聊天记录" @click="
				$pub.go(`/pages/chatHistory/chatHistory?data=${JSON.stringify(friend)}`)">
			</u-cell>
			<u-gap bg="#f6f5f8" height="8"></u-gap>
			<u-cell v-if="userOrAdmin" size="large" title="设置管理员" isLink value="" @click="
				$pub.go(`/pages/setAdmin/setAdmin?ugroupId=${friend.groupId}`) ">
			</u-cell>
			<u-gap bg="#f6f5f8" height="8"></u-gap>
			<u-cell size="large" title="消息免打扰" value="">
				<view class="" slot="right-icon">
					<u-switch v-model="value1" @change="changeDisturb" activeColor="#8652ff"></u-switch>
				</view>
			</u-cell>
			<u-cell size="large" title="置顶聊天" value="">
				<view class="" slot="right-icon">
					<u-switch v-model="isTop" @change="changeTop" activeColor="#8652ff"></u-switch>
				</view>
			</u-cell>
			<u-cell v-if="userOrAdmin" size="large" title="允许成员私人聊天" value="">
				<view class="" slot="right-icon">
					<u-switch v-model="value3" @change="change" activeColor="#8652ff"></u-switch>
				</view>
			</u-cell>
			<u-cell v-if="userOrAdmin" size="large" title="成员加入自动回复" @click="
          $pub.go(`/pages/autoReply/autoReply?ugroupId=${this.friend.groupId}`)" isLink>
			</u-cell>
			<u-gap bg="#f6f5f8" height="8"></u-gap>
			<u-cell size="large" title="清除聊天消息" isLink @click="clear"> </u-cell>

			<view v-if="friend.groupId">
				<u-gap bg="#f6f5f8" height="8"></u-gap>
				<u-cell size="large" title="退出群聊" isLink @click="tuichu"></u-cell>
			</view>
		</u-cell-group>

	</view>
</template>

<script>
	import {
		mapState, //先导入mapState方法
		mapMutations,
		mapActions,
		mapGetters,
	} from "vuex";
	export default {
		data() {
			return {
				url: "",
				value1: false,
				isTop: false,
				value3: false,
				/*  */
				friend: {},
				/*  */
				CrowdNumberList: [],
			};
		},
		computed: {
			...mapState('m_message', ['talkList']),
			userOrAdmin() {
				let type = this.friend.chatType;
				switch (type) {
					case "2" || 2:
						return false;
						break;
					case "3" || 3:
						return true;
						break;
					case "1" || 1:
						return true;
						break;
					case "4" || 4:
						return true;
						break;
					default:
						break;
				}
			},
			isTopCom() {
				const index = this.talkList.findIndex(
					(element) => element.id === this.friend.sessionId
				);
				// return this.talkList[index].isTop
			},
		},
		onLoad(options) {
			this.friend = JSON.parse(options.data);
		},
		onShow() {
			this.isTop =
				this.talkList[
					this.talkList.findIndex(
						(element) => element.id === this.friend.sessionId
					)
				].isTop;

			this.value1 =
				this.talkList[
					this.talkList.findIndex(
						(element) => element.id === this.friend.sessionId
					)
				].isDisturb;
		},
		methods: {
			...mapMutations("m_message", [
				"DELETE_MessageList",
				"TOP_CONVERSATION",
				"DELETE_MESSAGE_LIST",
				"DELETE_CONVERSATIONOne"
			]),
			/* 群成员 */
			async CrowdNumber() {
				let re = await this.$API.userApi.CrowdNumber(this.friend.groupId);
				this.CrowdNumberList = re;
			},
			/* 置顶 */
			changeTop() {
				/*  */
				this.TOP_CONVERSATION(this.friend.messageSessionId);
				/*  */
				// this.isTop = this.TOP_CONVERSATIONSTATUS(this.friend.messageSessionId);
			},
			/* 打扰 */
			changeDisturb() {
				this.TOP_CONVERSATIONSTATUS(this.friend.messageSessionId);
				this.DIS_CONVERSATION(this.friend.messageSessionId);
				/*  */
				this.value1 = this.DIS_CONVERSATIONSTATUS(this.friend.messageSessionId);
			},
			//退出群聊
			async exitagroupChat(item) {
				let re = await this.$API.friendApi.exitagroupChat(item);
				if (re) {
					//删除会话
					this.DELETE_MESSAGE_LIST(item);
					console.log('跳转');
					uni.switchTab({
						url: '/pages/message/message'
					})
				}
			},
			change() {},
			clear() {
				uni.showModal({
					title: "清除聊天记录",
					content: "确定删除聊天记录吗?",
					success: (res) => {
						if (res.confirm) {
							this.DELETE_MessageList(this.friend);
							this.DELETE_CONVERSATIONOne(this.friend.messageSessionId);
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			tuichu() {
				//群主退出删除群聊
				uni.showModal({
					title: "退出群聊",
					content: "确定退出群聊并删除聊天记录吗?",
					success: (res) => {
						if (res.confirm) {
							this.exitagroupChat(this.friend.groupId);
						} else if (res.cancel) {}
					},
				});
			},
		},
	};
</script>

<style>
	page {
		background-color: #f6f5f8;
	}
</style>
<style lang="scss" scoped>
	.w-33 {
		width: 66rpx;
	}

	.w-44 {
		width: 88rpx;
	}

	.h-64 {
		height: 128rpx;
	}

	.mr-31 {
		margin-right: 62rpx;
	}

	.size-12 {
		width: 24rpx;
		height: 24rpx;
	}

	.size-8 {
		width: 16rpx;
		height: 16rpx;
	}

	.size-44 {
		width: 88rpx;
		height: 88rpx;
	}

	::v-deep .u-cell__body--large {
		background-color: #fff !important;
	}

	.nickName {
		color: #999;
		text-align: center;
		font-family: PingFang SC;
		font-size: 11px;
		font-style: normal;
		font-weight: 400;
		line-height: 11px;
		/* 100% */
	}
</style>